<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>下拉菜单</title>
    <style>
        nav {
            width: 100%;
            height: 50px;
            background-color: lightblue;
        }

        .container {
            width: 1560px;
            margin: 0 auto;
        }

        a {
            text-decoration: none;
            padding: 0 10px;
        }

        li {
            list-style: none;
            margin: 0;
            padding: 0;
            
        }

        ul {
            margin: 0;
            padding: 0;
        }

        .nav {
            display: flex;
            justify-content: space-between;
            text-align: center;
        }

        .nav>li {
            width: 60px;
        }

        .current {
            line-height: 50px;
            position: relative;
        }

        .active {
            width: 100px;
            /* height: 200px; */
            border: 1px solid black;
            position: absolute;
            top: 20px;
            left: 0;           
            display: none; 
            /* opacity: 0; */
        }

        .active li {
            padding: 1px;
            /* width: 50px; */
            float: left;
        }

        .nav>li:hover .active {
             display: block; 
        } 
        .nav li a:hover{
            background-color: orange;
            color: green;
        }
    </style>
</head>

<body>
    <nav>
        <ul class="container nav">
            <li class="current"><a href="#">首页</a></li>
            <li class="current">
                <a href="#">剧集</a>
                <ul class="active">
                    <li>楚乔传</li>
                    <li>楚乔传</li>
                    <li>楚乔传</li>
                    <li>楚乔传</li>
                    <li>楚乔传</li>
                    <li>楚乔传</li>
                    <li>楚乔传</li>
                    <li>楚乔传</li>
                </ul>
            </li>
            <li class="current">
                <a href="#">电影</a>
                 <ul class="active">
                    <li>战狼二</li>
                    <li>战狼二</li>
                    <li>战狼二</li>
                    <li>战狼二</li>
                    <li>战狼二</li>
                    <li>战狼二</li>
                    <li>战狼二</li>
                    <li>战狼二</li>
                </ul> 
            </li>
            <li class="current"><a href="#">综艺</a></li>
            <li class="current"><a href="#">音乐</a></li>
            <li class="current"><a href="#">少儿</a></li>
            <li class="current"><a href="#">来疯</a></li>
            <li class="current"><a href="#">直播</a></li>
            <li class="current"><a href="#">片库</a></li>
            <li class="current"><a href="#">咨询</a></li>
            <li class="current"><a href="#">纪实</a></li>
            <li class="current"><a href="#">公益</a></li>
            <li class="current"><a href="#">体育</a></li>
            <li class="current"><a href="#">汽车</a></li>
            <li class="current"><a href="#">科技</a></li>
            <li class="current"><a href="#">财经</a></li>
            <li class="current"><a href="#">娱乐</a></li>
            <li class="current"><a href="#">文化</a></li>
            <li class="current"><a href="#">动漫</a></li>
            <li class="current"><a href="#">搞笑</a></li>
            <li class="current"><a href="#">旅游</a></li>
            <li class="current"><a href="#">时尚</a></li>
            <li class="current"><a href="#">亲自</a></li>
            <li class="current"><a href="#">教育</a></li>
            <li class="current"><a href="#">游戏</a></li>
            <li class="current"><a href="#">更多</a></li>
        </ul>
    </nav>
</body>
<script>
    // var lis = document.querySelectorAll('.current');
    // var uls = document.querySelectorAll('.current ul')
    // for (var i = 0; i < lis.length; i++) {
    //     lis[i].index = i;
    //     // console.log(i);
    //     lis[i].onmouseover = function () {
    //         for (var j = 0; j < uls.length; j++) {
    //             uls[j].className = '';
    //             lis[i].className = '';
    //         }
    //         // console.log(this.index);
    //         lis[this.index].style.opacity = '1';
    //         uls[this.index].className = 'active';
    //     }
    // }

</script>

</html>